<template>
  <div style="background-color: #f0f2f5">
    <Head></Head>
    <div class="home">
    <a-card class="card" title="产地关联数据" :bordered="false">
      <a-descriptions>
        <a-descriptions-item label="取货单号">{{ dataSource.makerId}}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions>
        <a-descriptions-item label="肥料使用表"><img :src="dataSource.manure" class="img"></a-descriptions-item>
        <a-descriptions-item label="农药使用表"><img :src="dataSource.pesticide" class="img"></a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card class="card" title="手机信息" :bordered="false">
      <a-descriptions>
        <a-descriptions-item label="人员ID">{{dataSource.collectID}}</a-descriptions-item>
        <a-descriptions-item label="时间">{{dataSource.collectTime}}</a-descriptions-item>
        <a-descriptions-item label="重量">{{dataSource.collectWeight}} g</a-descriptions-item>
        <a-descriptions-item label="原始RFID">{{dataSource.originalRFID}}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card class="card" title="入库信息" :bordered="false">
      <a-descriptions>
        <a-descriptions-item label="人员ID">{{dataSource.storageID}}</a-descriptions-item>
        <a-descriptions-item label="时间">{{dataSource.storageTime}}</a-descriptions-item>
        <a-descriptions-item label="重量">{{dataSource.storageWeight}} g</a-descriptions-item>
        <a-descriptions-item label="入库异常标志">{{dataSource.storageError}}</a-descriptions-item>
        <a-descriptions-item label="异常原因">{{dataSource.storageErrorReason}}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card class="card" title="加工信息" :bordered="false">
      <a-descriptions>
        <a-descriptions-item label="人员ID">{{dataSource.processID}}</a-descriptions-item>
        <a-descriptions-item label="时间">{{dataSource.processTime}}</a-descriptions-item>
        <a-descriptions-item label="重量">{{dataSource.processWeight}} g</a-descriptions-item>
        <a-descriptions-item label="加工异常标志">{{dataSource.processError}}</a-descriptions-item>
        <a-descriptions-item label="加工异常原因">{{dataSource.processErrorReason}}</a-descriptions-item>
        <a-descriptions-item label="应装袋数">{{dataSource.processCount}}</a-descriptions-item>
        <a-descriptions-item label="已装袋数">{{dataSource.baggedNumber}}</a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card class="card" title="质检信息" :bordered="false">
      <a-descriptions>
        <a-descriptions-item label="人员ID">{{ dataSource.qcid}}</a-descriptions-item>
        <a-descriptions-item label="时间">{{dataSource.qctime}}</a-descriptions-item>
        <a-descriptions-item label="结果"><img :src="dataSource.qcresult" class="img"> </a-descriptions-item>
      </a-descriptions>
    </a-card>

      <a-card class="card" title="出厂信息" :bordered="false">
        <a-descriptions>
          <a-descriptions-item label="终端RFID">{{ dataSource.endRFID}}</a-descriptions-item>
        </a-descriptions>
      </a-card>
    </div>
    <Foot></Foot>
  </div>
</template>

<script>
import { fetchList } from '@/api/trace/traceView'
import { DetailList } from '@/components'
import Head from '@/views/modules/trace/Head'
import Foot from '@/views/modules/trace/Foot'
export default {
  name: 'TraceView',

  components: {
    DetailList,
    Head,
    Foot
  },
  data () {
    return {
      dataSource: {
        id: '',
        processErrorReason: '',
        storageErrorReason: '',
        companyID: '',
        qcresult: '',
        qcid: '',
        processCount: '',
        processWeight: '',
        processError: '',
        processID: '',
        baggedNumber: '',
        qctime: '',
        processTime: '',
        manure: '',
        collectTime: '',
        collectWeight: '',
        originalRFID: '',
        storageID: '',
        storageTime: '',
        storageWeight: '',
        storageError: '',
        makerId: '',
        collectID: '',
        pesticide: '',
        endRFID: ''
      }
    }
  },
  methods: {
    init () {
      fetchList().then(res => {
        this.dataSource = res.data
      })
    }
  },
  created () {
    this.init()
  }
}
</script>
<style lang="less" scoped>
  .card{
    margin-bottom: 24px;
  }
  .img{
    width: 100px;
    height: 100px;
  }
  .home {
     width: 1200px;
     margin: 0 auto;
     padding: 25px 0;
   }
</style>
